<template>
  <div>
    <div class="group">
      <!-- 间距组件 -->
      <div class="groupspace">
        <el-space>
          <el-input v-model.trim="spuName" placeholder="请输入商品名称" />
          <el-input v-model.trim="id" placeholder="请输入团购ID" />
          <el-select placeholder="请选择团购状态" v-model="status">
            <el-option
              v-for="item in grouppurchase"
              :label="item.title"
              :value="item.value"
              :key="item.value"
            />
          </el-select>
          <el-button
            type="primary"
            class="iconfont icon-sousuo"
            @click="GroupList()"
            >查找</el-button
          >
          <el-button
            type="primary"
            class="iconfont icon-tianjia"
            @click="addCoupons()"
            >添加</el-button
          >
        </el-space>
      </div>
      <!-- 表格数据 -->
      <el-table :data="tableData" border style="width: 100%">
        <!-- 嵌套表格 -->
        <el-table-column type="expand">
          <template #default="props">
            <div>类目ID:{{ props.row.spuId }}</div>
            <el-table
              :data="props.row.groupShopSkuDTOList"
              border
              style="width: 100%"
            >
              <el-table-column prop="skuId" label="skuid" align="center" />
              <el-table-column prop="title" label="规格标签" align="center" />
              <el-table-column
                prop="skuGroupShopPrice"
                label="团购价格(元)"
                align="center"
              />
              <el-table-column prop="stock" label="库存" align="center">
                <template #default="scope"
                  ><div>{{ scope.row.stock }}(件)</div></template
                >
              </el-table-column>
              <el-table-column
                prop="originalPrice"
                label="原始价格(元)"
                align="center"
              />
              <el-table-column
                prop="price"
                label="售卖价格(元)"
                align="center"
              />
              <el-table-column
                prop="vipPrice"
                label="会员价格(元)"
                align="center"
              />
              <el-table-column prop="barCode" label="国际条码" align="center" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="团购ID" align="center" />
        <el-table-column prop="categoryId" label="商品ID" align="center" />
        <el-table-column prop="title" label="商品标题" align="center" />
        <el-table-column prop="img" label="商品主图" align="center">
          <template #default="scope">
            <el-popover width="500" placement="right">
              <template #reference>
                <el-image :src="scope.row.img"></el-image>
              </template>
              <img
                :src="scope.row.img"
                style="max-height: 200px; max-width: 300px"
              />e
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="automaticRefund" label="未满策略" align="center">
          <template #default="scope">
            <el-tag type="warning">{{
              scope.row.automaticRefund == 1 ? "发货" : "退款"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="活动状态"
          align="center"
          width="100"
        >
          <template #default="scope">
            <el-tag :type="scope.row.status == 0 ? 'primary' : 'warning'">{{
              scope.row.status == 0 ? "冻结" : "进行"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="gmtStart"
          label="开始时间"
          align="center"
          :formatter="dateFormat"
          width="170"
        />
        <el-table-column
          prop="gmtEnd"
          label="结束时间"
          align="center"
          :formatter="dateFormat"
          width="170"
        />
        <el-table-column
          prop="sales"
          label="当前人数"
          align="center"
          width="100"
        />
        <el-table-column
          prop="minNum"
          label="目标人数"
          align="center"
          width="100"
        />
        <el-table-column label="操作" align="center" width="180px">
          <template #default="scope">
            <div v-if="scope.row.status == 1 ? false : true">
              <el-button
                type="primary"
                size="small"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 左侧抽屉 -->
      <el-drawer v-model="table" :title="title" direction="ltr" size="60%">
        <!-- 卡片一 -->
        <el-card class="box-card">
          <h5>商品属性spu</h5>
          <el-form>
            <el-form-item label="团购商品">
              <el-cascader
                v-model="from.spuId"
                :options="options"
                :props="props1"
                clearable
                placeholder="团购商品"
                @change="GroupPurchases"
              />
            </el-form-item>
            <el-form-item label="团购时间">
              <el-config-provider :locale="locale" @change="shows()">
                <el-date-picker
                  v-model="from.gmtStart"
                  type="datetime"
                  placeholder="请选择日期时间"
                  value-format="x"
                  format="YYYY-M-DD-HH:mm:ss"
                />
                <a>至</a>
                <el-date-picker
                  v-model="from.gmtEnd"
                  type="datetime"
                  placeholder="请选择日期时间"
                  value-format="x"
                  format="YYYY-M-DD-HH:mm:ss"
                />
              </el-config-provider>
            </el-form-item>
            <el-form-item label="团队人数">
              <el-input-number
                v-model.Mumber="from.minNum"
                :min="1"
                class="mx-4"
                controls-position="right"
              />
            </el-form-item>
            <el-form-item label="">
              <div class="notyet">活动结束后人数没有达到基础人数采取：</div>
              <el-button-group v-model="from.automaticRefund" size="large">
                <el-button
                  :type="from.automaticRefund ? 'primary' : ''"
                  @click="from.automaticRefund = 1"
                  >不退款,我要发货</el-button
                >
                <el-button
                  :type="from.automaticRefund ? '' : 'primary'"
                  @click="from.automaticRefund = 0"
                  >自动退款,我不发货</el-button
                >
              </el-button-group>
            </el-form-item>
          </el-form>
        </el-card>
        <!-- 卡片二 -->
        <el-card>
          <template #header>
            <div>
              <span>商品类型(sku)</span>
              <!-- 团购价格修改弹出框 -->
              <el-popover
                placement="right"
                :width="400"
                trigger="click"
                v-model:visible="visible"
              >
                <template #reference>
                  <el-button
                    type="primary"
                    plain
                    @click="LotPricing"
                    style="margin-left: 460px"
                    >批量定价</el-button
                  >
                </template>
                <el-form
                  ref="ruleFormRef"
                  :model="ruleForm"
                  status-icon
                  :rules="rules"
                  label-width="120px"
                  class="demo-ruleForm"
                >
                  <el-form-item label="团购价格" prop="pass">
                    <el-input-number
                      v-model="price"
                      controls-position="right"
                      size="large"
                    />
                    <span>元</span>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="visible = false"
                      >取消</el-button
                    >
                    <el-button @click="LotSure()">确定</el-button>
                  </el-form-item>
                </el-form>
              </el-popover>
            </div>
          </template>
          <!-- 表格 -->
          <el-table :data="TypesDate" style="width: 100%">
            <el-table-column prop="id" label="Skuld" />
            <el-table-column prop="barCode" label="sku条形码" width="140" />
            <el-table-column prop="title" label="类型名" width="150" />
            <el-table-column prop="stock" label="库存" />
            <el-table-column prop="price" label="现价/元" />
            <el-table-column prop="skuGroupShopPrice" label="团购价格/元" />
            <el-table-column prop="address" label="操作">
              <template #default="scope">
                <el-button
                  size="small"
                  type="primary"
                  @click="handleEdits(scope.row)"
                  >更新</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <template #footer>
          <div style="flex: auto">
            <el-button @click="table = false">取消</el-button>
            <el-button type="primary" @click="confirmClick">确定</el-button>
          </div>
        </template>
        <!-- 更新对话框 -->
        <el-dialog v-model="updates" title="团购价格" width="30%">
          <el-form
            ref="ruleFormRef"
            :model="UpdatesList"
            status-icon
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="团购价格" prop="skuGroupShopPrice">
              <el-input-number
                v-model="UpdatesList.skuGroupShopPrice"
                controls-position="right"
                size="large"
              /><span>元</span>
            </el-form-item>
            <el-form-item label="现价" prop="price">
              <span>{{ this.UpdatesList.price }}</span>
            </el-form-item>
            <el-form-item label="sku类型名" prop="pass">
              <span>{{ this.UpdatesList.title }}</span>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="updates = false">取消</el-button>
              <el-button type="primary" @click="LogSure()">确定</el-button>
            </span>
          </template>
        </el-dialog>
      </el-drawer>
      <PagLnatio
        v-bind="paging"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
      ></PagLnatio>
    </div>
  </div>
</template>

<script>
import PagLnatio from "@/components/PagLnatio.vue";
import http from "@/http";
import moment from "moment";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElMessage } from "element-plus";
export default {
  components: {
    PagLnatio,
  },
  data() {
    return {
      title: "",
      TypesDate: [], //类型表格数据
      tableData: [], //列表表格数据
      updates: false,
      visible: false, //批量定价对话框
      price: "", //批量定价
      locale: zhCn,
      //团购
      id: "", //团购商品ID
      spuName: "", //团购商品的名称
      status: null, //团购商品的状态

      table: false, //抽屉默认显示隐藏

      grouppurchase: [
        { value: 0, title: "冻结" },
        { value: 1, title: "进行" },
      ],
      //更新团购价格
      UpdatesList: {
        id: "",
        skuGroupShopPrice: 0,
        price: 0,
        title: "",
      },
      paging: {
        page: 1, //默认第一页
        limit: 10, //显示几页
        total: null,
      },
      options: [], //接收类目
      //商品级联组件
      props1: {
        children: "children",
        label: "label",
        value: "id",
        checkStrictly: true,
        emitPath: false,
      },
      //数据
      from: {
        spuId: "",
        gmtStart: "", //团购开始时间戳
        gmtEnd: "", //团购结束时间戳
        minNum: 1, //团购最低人数
        automaticRefund: 0, //团购人数未满是否自动退款
        groupShopSkuList: [], //团购sku链表
      },
    };
  },
  created() {
    this.GroupList(); //列表数据
    this.CommoDitie(); //商品
  },
  mounted() {
    let that = this;
    document.body.click = function () {
      that.visible = false;
    };
  },
  methods: {
    GroupList() {
      let data = {
        _gp: "admin.groupshop",
        _mt: "list",
        id: this.id,
        spuName: this.spuName,
        status: this.status,
        page: this.paging.page,
        limit: this.paging.limit,
      };
      http.post(data).then((res) => {
        console.log(res);
        if (200 == res.errno) {
          this.tableData = res.data.items;
          this.paging.total = res.data.total;
        }
      });
    },

    //商品树
    CommoDitie() {
      let commoDitie = {
        _gp: "admin.product",
        _mt: "getSpuBigTree",
      };
      http.post(commoDitie).then((res) => {
        this.options = res.data;
      });
    },
    //批量价格
    LotPricing() {
      this.price = "";
      this.visible = true;
    },
    //批量定价确认
    LotSure() {
      if (this.price > 0) {
        this.TypesDate.forEach((val) => {
          console.log(val);
          val.skuGroupShopPrice = this.price;
        });
      }
      this.visible = false;
    },
    // 添加确定按钮
    confirmClick() {
      if (this.title == "创建") {
        let kal = [];
        this.TypesDate.forEach((i) => {
          kal.push({ skuId: i.id, skuGroupShopPrice: i.skuGroupShopPrice });
        });
        this.from.groupShopSkuList = JSON.stringify(kal);
        let plusdata = {
          _gp: "admin.groupshop",
          _mt: "create",
          ...this.from,
        };
        http.post(plusdata).then((res) => {
          console.log(res);
          if (200 == res.errno) {
            ElMessage.error("添加商品成功！");
            this.GroupList();
            this.table = false;
          } else {
          }
        });
      } else {
        let lasa = [];
        this.TypesDate.forEach((item) => {
          lasa.push({
            skuId: item.id,
            skuGroupShopPrice: item.skuGroupShopPrice,
          });
        });
        this.from.groupShopSkuList = JSON.stringify(lasa);
        let eads = {
          _gp: "admin.groupshop",
          _mt: "edit",
          ...this.from,
        };
        http.post(eads).then((res) => {
          console.log(res);
          if (200 == res.errno) {
            ElMessage.success("编辑成功!");
            this.table = false;
            this.from = this.$options.data().from;
            this.GroupList();
          } else {
            ElMessage.error("编辑失败！");
          }
        });
      }
    },
    //选择团购商品
    GroupPurchases(id) {
      console.log(id);
      let list = {
        _gp: "product",
        _mt: "getProduct",
        spuId: id,
      };
      http.post(list).then((res) => {
        console.log(res);
        if (200 == res.errno) {
          this.TypesDate = res.data.skuList;
        }
      });
    },
    //更新
    handleEdits(row) {
      this.UpdatesList.id = row.id;
      this.updates = true;
      Object.assign(this.UpdatesList, row);
    },
    //更新确定按钮
    LogSure() {
      this.TypesDate.forEach((val) => {
        console.log(val);
        if (val.id == this.UpdatesList.id) {
          val.skuGroupShopPrice = this.UpdatesList.skuGroupShopPrice;
        }
      });
      this.updates = false;
    },
    //删除列表数据
    handleDelete(row) {
      // console.log(row.id);
      let deletedata = {
        _gp: "admin.groupshop",
        _mt: "delete",
        id: row.id,
      };
      http.post(deletedata).then((res) => {
        console.log(res);
        if (200 == res.errno) {
          this.tableData.splice(index, 1);
          ElMessage.success("删除成功！");
        } else {
          ElMessage.success("删除失败！");
        }
      });
    },
    //添加
    addCoupons() {
      this.table = true;
      this.title = "创建";
      this.from = {};
      this.TypesDate = [];
    },
    //编辑
    handleEdit(item) {
      console.log(item);
      this.table = true;
      this.title = "编辑";
      Object.assign(this.from, {
        id: item.id,
        spuId: item.spuId,
        gmtStart: item.gmtStart, //团购开始时间戳
        gmtEnd: item.gmtEnd, //团购结束时间戳
        minNum: item.minNum, //团购最低人数
        automaticRefund: item.automaticRefund, //团购人数未满是否自动退款
      });
      this.TypesDate = item.groupShopSkuDTOList;
    },
    //时间戳
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD H:m:s");
    },
    handleSizeChange(val) {
      console.log(val);
      this.paging.limit = val;
      this.GroupList();
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.GroupList();
    },
  },
};
</script>

<style lang="less" scope>
.group {
  width: 98%;
  margin: auto;
  .groupspace {
    height: 40px;
  }
  h5 {
    padding: 0px;
    margin: 0px;
  }
  .el-card {
    height: 380px;
    .example-block {
      height: 60px;
      line-height: 60px;
    }
    .block {
      display: flex;
    }
    .notyet {
      float: left;
      width: 150px;
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>
